<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="assert/font-awesome-4.7.0/css/font-awesome.min.css"/>

    <script type="text/javascript" src="assert/jquery/jquery-2.1.1.min.js"></script>


    <script type="text/javascript" src="assert/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="assert/bootstrap/css/bootstrap.min.css"/>

    <link rel="stylesheet" type="text/css" href="assert/ace/ace.min.css"/>


    <script type="text/javascript" src="assert/jquery-nestable/jquery.nestable.js"></script>
    <!--<script type="text/javascript" src="jquery.nestable.extend.js"></script>-->


    <script type="text/javascript" src="assert/bootstrap-editable/js/bootstrap-editable.js"></script>
    <link rel="stylesheet" type="text/css" href="assert/bootstrap-editable/css/bootstrap-editable.css"/>


</head>

<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-sm-6">
            <div class="dd" id="nestable">

            </div>

        </div>
        <div class="col-sm-6">
            <button class="btn btn-primary" onclick="addGroup()">添加分组</button>
            <button class="btn btn-primary" onclick="getJSON()">获取json</button>

        </div>
    </div>
</div>


</body>

<style>
    .price {
        margin-left: 10px;
    }


</style>
<script>


    function getJSON() {
        console.info($('#nestable').nestable("serialize"))
    }
    function addGroup() {

        $('#nestable').nestable("addGroup");

    }


    $(document).ready(function () {
        $.fn.editable.defaults.mode = 'inline';


        var data = [{
            id: 1,
            group: '主体',
            params: [
                {
                    id: 2,
                    group: '品牌'
                },
                {
                    id: 3,
                    group: '型号'
                },
                {
                    id: 4,
                    group: '颜色',
                    params: [
                        {
                            id: '11',
                            group: '黑色',
                            price: 1499
                        },
                        {
                            id: '12',
                            group: '白色',
                            price: 1489
                        }
                    ]
                }, {
                    id: 5,
                    group: '上市年份'
                }, {
                    id: 6,
                    group: '上市月份'
                }
            ]
        }, {
            id: 7,
            group: '网络',
            params: [
                {
                    id: 8,
                    group: '2G'
                },
                {
                    id: 9,
                    group: '3G'
                }, {
                    id: 10,
                    group: '4G'
                }
            ]
        }]


        $('#nestable').nestable({
            data: data,
            reject: [{
                rule: function (draggedElement) {

                    var depth = $(draggedElement).attr("data-depth");
                    if ($(draggedElement).parentsUntil('.dd', 'ol').length == Number(depth)) {

                        return false;
                    } else {

                        return true;
                    }


                },
                action: function (draggedElement) {


                    alert('不可越级拖拽');
                }
            }]
        });


    })
</script>
</html>